CSS @property: Dominando la definición y validación de tipos de propiedades personalizadas

En el panorama siempre cambiante del desarrollo web, mantenerse a la vanguardia requiere adoptar nuevas tecnologías y técnicas que mejoren la eficiencia, la mantenibilidad y la experiencia general del usuario. Las propiedades personalizadas de CSS, también conocidas como variables CSS, han revolucionado la forma en que gestionamos y controlamos los estilos. Con la introducción de la regla-at @property, CSS obtiene una herramienta aún más potente: la capacidad de definir y validar estas propiedades personalizadas, lo que conduce a un estilo más robusto y predecible.

¿Qué es CSS @property?

La regla-at @property permite a los desarrolladores definir el tipo, la sintaxis y otras características de las propiedades personalizadas. Piense en ello como una forma de proporcionar estructura y validación para sus variables CSS. Antes de @property, las variables CSS eran esencialmente solo cadenas de texto que podían contener cualquier cosa. Esta falta de estructura podía provocar errores, haciendo que la depuración fuera más desafiante y dificultando la consistencia general del diseño. @property aborda estos problemas al proporcionar un mecanismo para controlar los tipos de valores que se pueden asignar a sus propiedades personalizadas.

¿Por qué usar CSS @property? Beneficios y ventajas

Las ventajas de usar @property son numerosas y contribuyen directamente a la mejora de las prácticas de desarrollo web:

• Mantenibilidad del código mejorada: Al definir explícitamente los tipos y comportamientos de las propiedades personalizadas, hace que su código sea más autodocumentado y fácil de entender. Otros desarrolladores (o su yo futuro) comprenderán rápidamente cómo se pretende utilizar una propiedad personalizada.
• Consistencia del diseño mejorada: La validación asegura que solo se asignen valores válidos a las propiedades personalizadas. Esto ayuda a mantener una apariencia visual consistente en todo su sitio web o aplicación.
• Robustez y prevención de errores: Los valores no válidos serán rechazados, evitando problemas de estilo inesperados y reduciendo el tiempo dedicado a la depuración.
• Estilo dinámico: @property permite una mejor integración con JavaScript, lo que le permite controlar y actualizar mediante programación sus variables CSS con confianza, sabiendo que los valores son válidos.
• Mejor autocompletado y experiencia del desarrollador: Los editores de código pueden proporcionar autocompletado y sugerencias de código más inteligentes, ayudando a los desarrolladores a escribir CSS de manera más rápida y precisa.
• Rendimiento optimizado: Aunque el impacto en el rendimiento es generalmente pequeño, la validación a veces puede llevar a optimizaciones menores por parte del navegador.

Componentes principales de la regla @property

La regla-at @property consta de varios componentes clave que definen cómo se comporta una propiedad personalizada.

--property-name

Este es el nombre de la propiedad personalizada que está definiendo. Debe comenzar con dos guiones (--), como es estándar para las propiedades personalizadas de CSS.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

El descriptor syntax define el tipo o patrón permitido para los valores de la propiedad personalizada. Utiliza un subconjunto de la sintaxis de CSS y puede tomar varios valores, incluyendo:

• <color>: Representa un valor de color (p. ej., red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Representa un valor de longitud (p. ej., 10px, 5em, 20%).
• <number>: Representa un valor numérico (p. ej., 10, 3.14).
• <percentage>: Representa un valor de porcentaje (p. ej., 50%).
• <url>: Representa una URL (p. ej., url('image.jpg')).
• <integer>: Representa un valor entero (p. ej., 10, -5).
• <angle>: Representa un valor de ángulo (p. ej., 45deg, 0.5turn).
• <time>: Representa un valor de tiempo (p. ej., 2s, 200ms).
• <string>: Representa un valor de cadena de texto.
• <image>: Representa un valor de imagen (igual que url).
• *: Acepta cualquier valor CSS válido. Este es un enfoque muy permisivo y debe usarse con precaución.
• Tipos combinados: Puede combinar múltiples tipos usando listas separadas por espacios (p. ej., <length> <length> <length> para definir tres valores de longitud) o usar el símbolo '|' para permitir cualquiera de los tipos listados (p. ej., <length> | <percentage> para admitir una longitud o un porcentaje).
• Sintaxis personalizadas: Las sintaxis personalizadas, para escenarios más complejos, a menudo son compatibles con implementaciones personalizadas, aunque generalmente se describirán utilizando una sintaxis de estilo regex como [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

El descriptor inherits determina si la propiedad personalizada hereda su valor de su elemento padre. Por defecto, las propiedades personalizadas no heredan. Este comportamiento se puede controlar con un valor booleano: true o false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

El descriptor initial-value establece el valor predeterminado de la propiedad personalizada si no se define explícitamente en el CSS. Esto proporciona un valor de respaldo cuando no se especifica la propiedad, similar al comportamiento de las propiedades CSS estándar.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Ejemplos prácticos

Vamos a sumergirnos en algunos ejemplos prácticos para ilustrar cómo usar @property de manera efectiva.

Ejemplo 1: Definiendo una propiedad de color

En este ejemplo, definimos una propiedad personalizada --primary-color para representar un color primario en nuestro sistema de diseño. Especificamos que solo acepta valores de color.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Válido */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Válido */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Ejemplo 2: Definiendo una propiedad de longitud

Aquí, definimos una propiedad personalizada --spacing para gestionar el espaciado entre elementos, aceptando valores de longitud. Este ejemplo demuestra claramente el valor de establecer un `initial-value` como predeterminado para todo el sitio. Esto es especialmente útil cuando se utiliza un sistema de diseño en el que se definen los espaciados predeterminados.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Ejemplo 3: Definiendo una propiedad de entero

Este ejemplo define una propiedad personalizada para el número de columnas en un diseño de cuadrícula, validando que el valor sea un entero.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Ejemplo 4: Herencia de propiedades

Aquí definimos una propiedad personalizada que *sí* se heredará. La propiedad `font-size` establecida en `1rem` en el body afectará a todos sus hijos a menos que se anule.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Anula el valor heredado */
}

            

              
                Copy
              
            
          

Ejemplo 5: Combinando tipos

Usando el operador '|', podemos combinar tipos. Aquí aceptamos una `length` o un `percentage` para el desplazamiento de la sombra.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Mejores prácticas para usar @property

Para maximizar los beneficios de @property, siga estas mejores prácticas:

• Defina las propiedades en una ubicación central: Agrupe sus definiciones de @property en un archivo o sección CSS dedicada, a menudo en la parte superior de su hoja de estilo principal o dentro de un archivo del sistema de diseño. Esto promueve la organización y facilita la gestión de sus propiedades personalizadas.
• Use nombres de propiedad descriptivos: Elija nombres que indiquen claramente el propósito de cada propiedad personalizada (p. ej., --primary-button-color, --header-font-size). Esto mejora la legibilidad y la comprensión.
• Proporcione documentación completa: Documente sus propiedades personalizadas, incluyendo su sintaxis, uso y cualquier restricción. Esta documentación se puede incluir en forma de comentarios junto a su CSS o en una guía de estilo separada.
• Elija la sintaxis correcta: Seleccione cuidadosamente la syntax apropiada para cada propiedad. Usar la sintaxis correcta previene errores y asegura que los valores asignados sean válidos.
• Considere la herencia cuidadosamente: Decida si una propiedad debe heredar su valor de su elemento padre. Esto depende de la naturaleza de la propiedad y de cómo debe aplicarse en su diseño.
• Use initial-value estratégicamente: Establezca un initial-value para todas las propiedades personalizadas que requieran un valor predeterminado. Esto proporciona un respaldo y asegura que el estilo se aplique incluso si la propiedad no está establecida explícitamente.
• Aproveche los sistemas de diseño: Integre @property dentro de su sistema de diseño para mantener la consistencia y mejorar el flujo de trabajo de desarrollo de su equipo. Al usarlo junto con otros componentes, construye diseños más robustos y modulares, que a menudo es el objetivo al crear componentes para uso global.
• Pruebe a fondo: Pruebe sus propiedades personalizadas y su comportamiento en diferentes navegadores y dispositivos para garantizar la compatibilidad y una experiencia de usuario consistente. Las pruebas entre navegadores son un paso crítico, ya que el soporte de `property` aún no está implementado universalmente.

Compatibilidad con navegadores

A fecha de 26 de octubre de 2023, el soporte para la regla-at @property varía entre navegadores. Chrome, Edge y Safari tienen un buen soporte, mientras que el soporte en Firefox es limitado. Consulte siempre recursos como Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)) para mantenerse actualizado sobre la compatibilidad con navegadores.

Consideraciones importantes para la compatibilidad con navegadores:

• Detección de características: Use técnicas de detección de características para manejar con gracia los navegadores que no soportan @property. Puede usar una verificación de propiedad CSS o detección de características de JavaScript para aplicar estilos alternativos o polyfills.
• Mejora progresiva: Diseñe su sitio web con un estilo base que funcione sin @property. Luego, mejore progresivamente el diseño añadiendo soporte para @property en navegadores compatibles.
• Polyfills y fallbacks: Considere usar polyfills o proporcionar fallbacks para los navegadores que no soportan completamente @property. Esto podría implicar el uso de variables CSS simples, o preprocesamiento usando SASS, LESS u otras metodologías.

Usando CSS @property con JavaScript

Una de las mayores ventajas de las propiedades personalizadas de CSS es su capacidad para ser manipuladas con JavaScript, lo que permite un estilo dinámico y experiencias de usuario mejoradas. @property mejora esta capacidad, haciendo que la integración entre CSS y JavaScript sea aún más potente y predecible.

Aquí se muestra cómo puede interactuar con propiedades personalizadas definidas usando @property en JavaScript:

1. Obtener el valor de una propiedad personalizada: Use getPropertyValue() para recuperar el valor de una propiedad personalizada.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // p. ej., "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Establecer el valor de una propiedad personalizada: Use setProperty() para establecer el valor de una propiedad personalizada. Debido al parámetro syntax de la definición de `@property`, el establecimiento basado en JavaScript puede activar la validación del valor dentro del navegador.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Ejemplo: Cambio de color dinámico con JavaScript

Ilustremos cómo crear un cambio de color dinámico usando JavaScript y @property.

HTML:

            
<button class="my-button">Change Color</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Podría basarse en alguna lógica/entrada
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

En este ejemplo, al hacer clic en el botón se cambia el color de fondo del botón modificando la propiedad personalizada --button-color usando JavaScript.

Internacionalización (i18n) y CSS @property

CSS @property puede ser una herramienta valiosa para crear aplicaciones web que soporten diferentes idiomas y configuraciones regionales. Así es como se puede aplicar a i18n:

• Tipografía: Defina propiedades personalizadas para tamaños de fuente, alturas de línea y familias de fuentes, lo que le permite adaptar la apariencia del texto según el idioma seleccionado.
• Diseño: Utilice propiedades para espaciado, márgenes y relleno para acomodar variaciones en la dirección del texto (p. ej., de izquierda a derecha vs. de derecha a izquierda) y diferentes anchos de caracteres.
• Colores: Emplee propiedades para los colores de los elementos de la interfaz de usuario, como colores de botones, colores de texto y colores de fondo. Estos pueden ajustarse para alinearse con las preferencias culturales o las directrices de diseño para regiones específicas.
• Dirección del texto: Use una propiedad personalizada para controlar la dirección del texto (p. ej., ltr, rtl) y modificar el diseño en consecuencia.

Ejemplo: Adaptando tamaños de fuente según el idioma

En este ejemplo, demostramos cómo adaptar el tamaño de fuente de los encabezados según el idioma seleccionado. El enfoque utilizaría una biblioteca de JavaScript para determinar el idioma apropiado y establecer las propiedades personalizadas.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Luego, establezca dinámicamente el valor en JavaScript según el idioma detectado:

            
// Suponiendo una variable global o función para obtener el idioma del usuario
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Ajustar para japonés
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Predeterminado
}

            

              
                Copy
              
            
          

Consideraciones de accesibilidad

Al trabajar con @property, es esencial tener en cuenta la accesibilidad:

• Contraste de color: Asegure un contraste de color suficiente entre el texto y los fondos. Use propiedades personalizadas para los colores para actualizar fácilmente el diseño y cumplir con los requisitos de contraste.
• Tamaño del texto: Permita a los usuarios controlar el tamaño del texto. Use unidades relativas (rem, em) y propiedades personalizadas para facilitar el escalado de fuentes.
• Indicadores de foco: Personalice los indicadores de foco para que sean claramente visibles. Use propiedades personalizadas para controlar el color y el estilo de los contornos de foco.
• Atributos ARIA: Asegúrese de que los elementos tengan los atributos ARIA apropiados cuando use propiedades personalizadas para controlar estados o comportamientos.
• Navegación por teclado: Verifique que su sitio web sea fácilmente navegable usando un teclado, especialmente si se utilizan propiedades personalizadas para gestionar elementos interactivos.

Consideraciones y soluciones para la compatibilidad entre navegadores

Aunque @property es una herramienta potente, recuerde que el soporte de los navegadores aún no está implementado universalmente. Debe emplear técnicas de compatibilidad entre navegadores para mitigar el impacto de la falta de soporte.

• Mejora progresiva: Diseñe su estilo con variables CSS básicas, y luego use `@property` para características adicionales en navegadores compatibles.
• Detección de características: Use métodos de detección de características para determinar si un navegador soporta @property antes de aplicar estilos que lo usen. Se puede hacer una verificación simple usando JavaScript.
• Fallbacks de CSS: Proporcione valores de respaldo para propiedades que no son soportadas. Esto se puede hacer estableciendo propiedades directamente, o usando diferentes variables para navegadores compatibles y no compatibles.
• Preprocesadores: Utilice preprocesadores de CSS como Sass o Less para traducir estructuras de nivel superior a CSS estándar que se pueda usar en navegadores que no tienen soporte completo para `@property`. Aunque esto introduce un paso adicional, los beneficios a menudo superan las desventajas.

Ejemplo de un fallback de CSS:

            
.element {
  --base-color: #333; /* Valor predeterminado para navegadores sin @property */
  color: var(--base-color);
}

@supports (color: --base-color) { /* Detección de características para @property*/
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Añada aquí estilos más complejos utilizando @property */
}

            

              
                Copy
              
            
          

Herramientas y bibliotecas

Varias herramientas y bibliotecas pueden ayudar a trabajar con @property:

• Plugins de PostCSS: Plugins como `postcss-custom-properties` y `postcss-custom-properties-experimental` pueden ayudar a transformar propiedades personalizadas y proporcionar soporte para navegadores más antiguos convirtiendo las definiciones de `@property` en reglas CSS equivalentes.
• Stylelint: Integre stylelint y reglas o plugins personalizados para validar el uso y la estructura de sus propiedades personalizadas.
• Frameworks de sistemas de diseño: Integre @property en frameworks de sistemas de diseño populares como Ant Design, Material UI y Bootstrap para garantizar la consistencia del diseño y proporcionar a los desarrolladores una experiencia más fluida.

Conclusión

CSS @property es una potente adición al conjunto de herramientas de desarrollo web, que aporta estructura, validación y capacidades dinámicas a las propiedades personalizadas. Al definir el tipo y el comportamiento de sus variables CSS, puede mejorar la mantenibilidad del código, la consistencia del diseño y crear soluciones de estilo más robustas y predecibles.

A medida que mejora el soporte de los navegadores, incorporar @property en sus proyectos es cada vez más importante. Al adoptar las mejores prácticas descritas en esta guía, puede aprovechar los beneficios de esta nueva característica y escribir CSS más eficiente, mantenible y escalable. ¡Adopte @property y transforme su flujo de trabajo de desarrollo web!

Lecturas adicionales

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property